﻿@layout RootLayout
@inherits LayoutComponentBase

<Layout Sider="true">
    <LayoutSider>
        <LayoutSiderContent>
            <Sidebar @ref="sidebar">
                <SidebarContent>
                    <SidebarBrand>
                        <a href="">Blazorise Demo</a>
                    </SidebarBrand>
                    <SidebarNavigation>
                        <SidebarLabel>Main</SidebarLabel>
                        <SidebarItem>
                            <SidebarLink To="" Title="Show dashboard">
                                <Icon Name="IconName.Dashboard" Margin="Margin.Is3.FromRight" />Dashboard
                            </SidebarLink>
                        </SidebarItem>
                        <SidebarItem>
                            <SidebarLink Toggled="(isOpen)=> sidebarSubItemUIElement.Toggle(isOpen)" Visible="true">
                                <Icon Name="IconName.Edit" Margin="Margin.Is3.FromRight" />UI Elements
                            </SidebarLink>
                            <SidebarSubItem @ref="sidebarSubItemUIElement" Visible="true">
                                <SidebarItem>
                                    <SidebarLink To="tests/buttons">Buttons</SidebarLink>
                                </SidebarItem>
                                <SidebarItem>
                                    <SidebarLink To="tests/modals">Modals</SidebarLink>
                                </SidebarItem>
                                <SidebarItem>
                                    <SidebarLink To="tests/cards">Cards</SidebarLink>
                                </SidebarItem>
                                <SidebarItem>
                                    <SidebarLink To="tests/progressbars">Progress bars</SidebarLink>
                                </SidebarItem>
                                <SidebarItem>
                                    <SidebarLink To="tests/elements">General UI</SidebarLink>
                                </SidebarItem>
                                <SidebarItem>
                                    <SidebarLink To="tests/typography">Typography</SidebarLink>
                                </SidebarItem>
                                <SidebarItem>
                                    <SidebarLink To="tests/collapse">Collapse</SidebarLink>
                                </SidebarItem>
                                <SidebarItem>
                                    <SidebarLink To="tests/tables">Tables</SidebarLink>
                                </SidebarItem>
                                <SidebarItem>
                                    <SidebarLink To="tests/figures">Figures</SidebarLink>
                                </SidebarItem>
                                <SidebarItem>
                                    <SidebarLink To="tests/tabs">Tabs</SidebarLink>
                                </SidebarItem>
                                <SidebarItem>
                                    <SidebarLink To="tests/layout">Layout</SidebarLink>
                                </SidebarItem>
                            </SidebarSubItem>
                        </SidebarItem>
                        <SidebarItem>
                            <SidebarLink Toggled="(isOpen)=> sidebarSubItemForms.Toggle(isOpen)">
                                <Icon Name="IconName.Edit" Margin="Margin.Is3.FromRight" />Forms
                            </SidebarLink>
                            <SidebarSubItem @ref="sidebarSubItemForms" Visible="@formsSubItemVisible">
                                <SidebarItem>
                                    <SidebarLink To="tests/forms">Forms</SidebarLink>
                                </SidebarItem>
                                <SidebarItem>
                                    <SidebarLink To="tests/validations">Validations</SidebarLink>
                                </SidebarItem>
                            </SidebarSubItem>
                        </SidebarItem>
                        <SidebarItem>
                            <SidebarLink Toggled="(isOpen)=> sidebarSubItemExtensions.Toggle(isOpen)">
                                <Icon Name="IconName.Edit" Margin="Margin.Is3.FromRight" />Extensions
                            </SidebarLink>
                            <SidebarSubItem @ref="sidebarSubItemExtensions">
                                <SidebarItem>
                                    <SidebarLink To="tests/datagrid">DataGrid</SidebarLink>
                                </SidebarItem>
                                <SidebarItem>
                                    <SidebarLink To="tests/components">Components</SidebarLink>
                                </SidebarItem>
                                <SidebarItem>
                                    <SidebarLink To="tests/charts">Charts</SidebarLink>
                                </SidebarItem>
                                <SidebarItem>
                                    <SidebarLink To="tests/livecharts">Live Charts</SidebarLink>
                                </SidebarItem>
                            </SidebarSubItem>
                        </SidebarItem>
                        <SidebarItem>
                            <SidebarLink Toggled="(isOpen)=> sidebarSubItemApps.Toggle(isOpen)">
                                <Icon Name="IconName.Smartphone" Margin="Margin.Is3.FromRight" />Apps
                            </SidebarLink>
                            <SidebarSubItem @ref="sidebarSubItemApps">
                                <SidebarItem>
                                    <SidebarLink To="apps/todo">Todo List</SidebarLink>
                                </SidebarItem>
                            </SidebarSubItem>
                        </SidebarItem>
                    </SidebarNavigation>
                </SidebarContent>
            </Sidebar>
        </LayoutSiderContent>
    </LayoutSider>
    <Layout>
        <LayoutHeader Fixed="true">
            <Bar Style="height: 64px;" Breakpoint="Breakpoint.Desktop" Background="Background.Primary" ThemeContrast="ThemeContrast.Light">
                <BarBrand>
                    <BarItem>
                        <BarLink To="">
                            <Icon Name="IconName.Dashboard" />
                            Blazorise Demo
                        </BarLink>
                    </BarItem>
                </BarBrand>
                <BarToggler Clicked="@ToggleSidebar">
                </BarToggler>
                <BarMenu>
                    <BarStart>
                        <BarItem>
                            <BarLink To="https://blazorise.com/">Home</BarLink>
                        </BarItem>
                        <BarItem>
                            <BarLink To="https://blazorise.com/docs/">Documentation</BarLink>
                        </BarItem>
                        <BarItem>
                            <BarDropdown>
                                <BarDropdownToggle>More</BarDropdownToggle>
                                <BarDropdownMenu>
                                    <BarDropdownItem To="https://blazorise.com/docs/quick-start/">
                                        Quick-Start Guide
                                    </BarDropdownItem>
                                    <BarDropdownItem To="https://blazorise.com/docs/usage/">
                                        Usage
                                    </BarDropdownItem>
                                </BarDropdownMenu>
                            </BarDropdown>
                        </BarItem>
                    </BarStart>
                    <BarEnd>
                        <BarItem>
                            <BarDropdown>
                                <BarDropdownToggle><Icon Name="IconName.Tint" /> Theme</BarDropdownToggle>
                                <BarDropdownMenu Style="padding: 15px; min-width:550px;" RightAligned="true">
                                    <Row>
                                        <Column Margin="Margin.Is2.FromBottom">
                                            <Field>
                                                <Check TValue="bool" Checked="@Theme.IsGradient" CheckedChanged="@OnGradientChanged">Gradient colors</Check>
                                            </Field>
                                            <Field>
                                                <Check TValue="bool" Checked="@Theme.IsRounded" CheckedChanged="@OnRoundedChanged">Rounded elements</Check>
                                            </Field>
                                        </Column>
                                    </Row>
                                    <Row>
                                        <Column>
                                            <Container Fluid="true">
                                                <ThemeColorSelector Value="@Theme.ColorOptions?.Primary" ValueChanged="@OnThemeColorChanged"></ThemeColorSelector>
                                            </Container>
                                        </Column>
                                    </Row>
                                </BarDropdownMenu>
                            </BarDropdown>
                        </BarItem>
                        <BarItem>
                            <BarLink To="https://github.com/stsrki/blazorise">GitHub</BarLink>
                        </BarItem>
                    </BarEnd>
                </BarMenu>
            </Bar>
        </LayoutHeader>
        <LayoutContent Padding="Padding.Is4.OnX">
            @Body
        </LayoutContent>
    </Layout>
</Layout>

@code{
    void OnGradientChanged( bool value )
    {
        Theme.IsGradient = value;

        //if ( Theme.GradientOptions == null )
        //    Theme.GradientOptions = new GradientOptions();

        //Theme.GradientOptions.BlendPercentage = 80;

        Theme.ThemeHasChanged();
    }

    void OnRoundedChanged( bool value )
    {
        Theme.IsRounded = value;

        //var borderRadius = value ? "0rem" : ".25rem";

        //if ( Theme?.ButtonOptions != null )
        //{
        //    Theme.ButtonOptions.BorderRadius = borderRadius;
        //    Theme.ButtonOptions.SmallBorderRadius = value ? "0rem" : ".2rem";
        //    Theme.ButtonOptions.SmallBorderRadius = value ? "0rem" : ".3rem";
        //}

        //if ( Theme?.DropdownOptions != null )
        //    Theme.DropdownOptions.BorderRadius = borderRadius;

        //if ( Theme?.InputOptions != null )
        //    Theme.InputOptions.BorderRadius = borderRadius;

        //if ( Theme?.CardOptions != null )
        //    Theme.CardOptions.BorderRadius = borderRadius;

        //if ( Theme?.ModalOptions != null )
        //    Theme.ModalOptions.BorderRadius = borderRadius;

        //if ( Theme?.TabsOptions != null )
        //    Theme.TabsOptions.BorderRadius = borderRadius;

        //if ( Theme?.ProgressOptions != null )
        //    Theme.ProgressOptions.BorderRadius = borderRadius;

        //if ( Theme?.AlertOptions != null )
        //    Theme.AlertOptions.BorderRadius = borderRadius;

        //if ( Theme?.BreadcrumbOptions != null )
        //    Theme.BreadcrumbOptions.BorderRadius = borderRadius;

        //if ( Theme?.BadgeOptions != null )
        //    Theme.BadgeOptions.BorderRadius = borderRadius;

        //if ( Theme?.PaginationOptions != null )
        //    Theme.PaginationOptions.BorderRadius = borderRadius;

        Theme.ThemeHasChanged();
    }

    void OnThemeColorChanged( string value )
    {
        if ( Theme.ColorOptions == null )
            Theme.ColorOptions = new ThemeColorOptions();

        if ( Theme.BackgroundOptions == null )
            Theme.BackgroundOptions = new ThemeBackgroundOptions();

        if ( Theme.TextColorOptions == null )
            Theme.TextColorOptions = new ThemeTextColorOptions();

        Theme.ColorOptions.Primary = value;
        Theme.BackgroundOptions.Primary = value;
        Theme.TextColorOptions.Primary = value;

        if ( Theme.InputOptions == null )
            Theme.InputOptions = new ThemeInputOptions();

        //Theme.InputOptions.Color = value;
        Theme.InputOptions.CheckColor = value;
        Theme.InputOptions.SliderColor = value;

        Theme.ThemeHasChanged();
    }

    Sidebar sidebar;
    SidebarSubItem sidebarSubItemUIElement;
    SidebarSubItem sidebarSubItemForms;
    SidebarSubItem sidebarSubItemExtensions;
    SidebarSubItem sidebarSubItemApps;

    bool formsSubItemVisible = true;

    //bool collapseNavMenu = true;

    void ToggleSidebar()
    {
        sidebar.Toggle();
    }

    [CascadingParameter] protected Theme Theme { get; set; }
}